<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  
  <head>
    <title>药品添加</title>
    <jsp:include page="header.jsp"></jsp:include>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/js/picUp/zyupload-1.0.0.min.css" />
    <script charset="utf-8" src="${pageContext.request.contextPath }/lib/kindeditor/kindeditor-all.js"></script>
	<script charset="utf-8" src="${pageContext.request.contextPath }/lib/kindeditor/lang/zh-CN.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <style>
  	.my-upload {
  		display: block;
  		width: 100px;
  		height: 32px;
  		text-align: center;
  		margin-top: 10px;
  		background-color: red;
  		color:#ffffff;
  		line-height:32px;
  		font-size: 16px;
  	}
  	#my_pic {
  		position:relative;
  		display:block;
  		width: 100px;
  		height: 100px;
  	}
  	#my_pic img {
  		display: block;
  		width: 100%;
  		height: 100%;
  	}
  	.pic-container {
  		width: 100%;
  		height: auto;
  	}
  </style>
  <body>
    <div class="x-body">
        <form class="layui-form" id="myForm">
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>药品名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="goodsName" name="goodsName" required="" lay-verify="required"
                  autocomplete="off" class="layui-input" value="${item.goodsName}">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>厂家
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="goodsPoint" name="goodsPoint" required="" lay-verify="required"
                  autocomplete="off" class="layui-input" value="${item.goodsPoint}">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>首页图片
              </label>
              <div class="layui-input-inline">
              		<span id="my_pic">
              			<img src="/images/pic_160.png" id="pic_back"/>
              		</span>
                  <input type="hidden" id="goodsPic" name="goodsPic" autocomplete="off" class="layui-input" value="${item.goodsPic}">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="phone" class="layui-form-label">
                  <span class="x-red">*</span>商品规格
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="goodsType" name="goodsType" required="" lay-verify="required"
                  autocomplete="off" class="layui-input" value="${item.goodsType}">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>详情图片
              </label>
              <div class="layui-input-inline">
              	<div class="pic-container">
              	 <div id="zyupload" class="zyupload"></div>  
				</div>
                 <input type="hidden" id="goodsRemark" name="goodsRemark" autocomplete="off" class="layui-input" value="${item.goodsRemark}">
                 
              </div>
          </div>
           <!-- <div class="layui-form-item">
           		<div class="my-content"></div>
           </div> -->
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>商品库存
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="goodsStorge" name="goodsStorge" required="" lay-verify="number"
                  autocomplete="off" class="layui-input" value="${item.goodsStorge}">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>商品价格
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="goodsPrice" name="goodsPrice" required="" lay-verify="number"
                  autocomplete="off" class="layui-input" value="${item.goodsPrice}">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>商品原价
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="goodsDecode" name="goodsDecode" required="" lay-verify="number"
                  autocomplete="off" class="layui-input" value="${item.goodsDecode}">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>置顶商品
              </label>
              <div class="layui-input-inline">
              		 <input type="radio" name="goodsSell" value="1" title="是">
      				 <input type="radio" name="goodsSell" value="0" title="否" checked>
                  
              </div>
          </div>
          <div class="layui-form-item layui-form-text">
              <label for="desc" class="layui-form-label">
                  描述
              </label>
              <div class="layui-input-block">
                  <textarea placeholder="请输入内容" id="desc" name="goodsDetail" class="layui-textarea">
                  	${item.goodsDetail}
                  </textarea>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <input type="hidden" name="id" value="${item.id}">
             <button  class="layui-btn" lay-filter="add" id="my_add">
                  增加
              </button>
             
          </div>
      </form>
    </div>
     <script type="text/javascript" src="${pageContext.request.contextPath }/js/zyupload.drag-1.0.0.min.js"></script>
    <script type="text/javascript">
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('#desc', {
        	themeType : 'simple',
            resizeType: 1,
            imageSizeLimit : '10MB',
        	cssPath : '${pageContext.request.contextPath }/lib/kindeditor/plugins/code/prettify.css',
			uploadJson : '${pageContext.request.contextPath }/admin/kindUpload',//标识处理图片的文件
			fileManagerJson :'${pageContext.request.contextPath }/admin/kindUpload',
			allowFileManager : true,//允许上传文件和图片
        });
        K('#my_pic').click(function() {
			editor.loadPlugin('image', function() {
				editor.plugin.imageDialog({
					showRemote : false,
					clickFn : function(data) {
						$('#goodsPic').val(data);
						$('#pic_back').attr("src",data);
						editor.hideDialog();
					}
				});
			});
		});
    }); 
   
    $('#my_add').click(function(){
    	 var myform =$('#myForm');
    	 var remark =$('#goodsRemark').val();
    	 var goodsName =$('#goodsName').val();
    	 var  goodsPoint =$('#goodsPoint').val();
    	 var goodsType=$('#goodsType').val();
    	 var goodsStorge=$('#goodsStorge').val();
    	 var goodsPrice =$('#goodsPrice').val();
    	 var goodsDecode=$('#goodsDecode').val();
    	 var goodsPic =$('#goodsPic').val();
         var detail=editor.html();
         $('#desc').val(detail);
         if(goodsName==''){
        	layer.msg('必填项不能为空!');
          	return false;
         }
         if(goodsPoint==''){
         	layer.toast('必填项不能为空!');
           	return false;
          }
         if(goodsType==''){
          	layer.msg('必填项不能为空!');
            return false;
           }
         if(isNaN(goodsStorge)){
           	layer.msg('库存必须为数字!');
            return false;
            }
         if(isNaN(goodsPrice)){
            layer.msg('价格格式不正确!');
             return false;
             }
         if(isNaN(goodsDecode)){
             layer.msg('价格必须为数字!');
              return false;
              }
          if(goodsPic==''){
        	layer.msg('请上传首页图片!');
          	return false;
         } 
         if(remark==''){
         	layer.msg('请上传详情图片!');
         	return false;
         }  
         var rr ="/admin/saveItem";
         $.post(rr,myform.serialize(),
                 function (data) {
                     if('ok'==data){
                    	 parent.location.reload();
                         x_admin_close();
                     }
                 }
             ); 
         return false;
    });
	</script>
	 <script type="text/javascript">
			$(function(){
				var str ="";
				// 初始化插件
				$("#zyupload").zyUpload({
					width            :   "700px",                 // 宽度
					height           :   "auto",                 // 宽度
					itemWidth        :   "140px",                 // 文件项的宽度
					itemHeight       :   "115px",                 // 文件项的高度
					url              :   "/admin/picUpload",  // 上传文件的路径
					fileType         :   ["jpg","png","gif","jpeg"],// 上传文件的类型
					fileSize         :   51200000,                // 上传文件的大小
					multiple         :   true,                    // 是否可以多个文件上传
					dragDrop         :   true,                    // 是否可以拖动上传文件
					tailor           :   false,                    // 是否可以裁剪图片
					del              :   true,                    // 是否可以删除文件
					finishDel        :   false,  				  // 是否在上传文件完成后删除预览
					/* 外部获得的回调接口 */
					onSelect: function(selectFiles, allFiles){    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
						console.info("当前选择了以下文件：");
						//console.info(selectFiles);
					},
					onDelete: function(file, files){              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
						console.info("当前删除了此文件：");
						//console.info(file.name);
					},
					onSuccess: function(file, response){          // 文件上传成功的回调方法
						if(response!='error'){
							str+=response+',';
						}
						$('#goodsRemark').val(str);
						//console.log(str);
						//$("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
					},
					onFailure: function(file, response){          // 文件上传失败的回调方法
						layer.alert("此文件上传失败：");
						//console.info(file.name);
					},
					onComplete: function(response){           	  // 上传完成的回调方法
						//console.info("文件上传完成");
						//console.info(response);
					}
				});
				
			});
		
		</script> 
  </body>
</html>